<template>
	<div class="home-container">
		<div class="left">
			<div class="user_atten">
				<ul>
					<li>
						<router-link to=""><strong>19</strong><span>关注</span></router-link>
					</li>
					<li>
						<router-link to=""><strong>19099999</strong><span>粉丝</span></router-link>
					</li>
					<li>
						<router-link to=""><strong>19</strong><span>微博</span></router-link>
					</li>
				</ul>
			</div>
			<div class="brief-introduction">
				<ul>
					<li>快来介绍一下自己</li>
					<li>
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-weizhi1"></use>
						</svg>
						{{ "地址：" }}
					</li>
					<li>
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-shengrix"></use>
						</svg>
					</li>
					<li>
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-gender"></use>
						</svg>
					</li>
					<li>
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-bianji"></use>
						</svg>
						{{ "简介：" }}
					</li>
					<li>
						<router-link to="" class="no-more">
							查看更多 <el-icon><ArrowRight /></el-icon>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
		<div class="right">
			<div class="func_area_blogs"></div>
			<BlogList></BlogList>
		</div>
	</div>
</template>

<script setup lang="ts">
import BlogList from "../../user/components/BlogList.vue";
</script>

<style scoped lang="scss">
.home-container {
	display: flex;
	.left {
		margin-right: 20px;
	}
}
.left {
	flex: 2;
}
.right {
	flex: 5;
	height: 10px;
}
.user_atten {
	background-color: #fff;
	ul {
		display: flex;
		li {
			flex: 1;
			padding: 10px 0;
		}
		li:not(:last-child) > a {
			border-right: 1px solid $grey;
		}
		a {
			display: flex;
			text-align: center;
			flex-direction: column;

			strong {
				font-size: 16px;
				font-weight: normal;
				font-family: Tahoma;
			}
			span {
				font-size: 12px;
				color: $deep-grey;
			}
		}
	}
}
.brief-introduction {
	background-color: #fff;
	margin-top: 15px;
	ul > li {
		font-size: 12px;
		color: #333;
	}
	ul > :first-child {
		padding: 0 10px;
		height: 32px;

		line-height: 32px;
	}
	ul > *:not(:last-child, :first-child) {
		height: 32px;
		padding: 0 15px;
		line-height: 32px;
		border-top: 1px solid #f2f2f5;
	}
	ul > :last-child {
		border-top: 1px solid $grey;
		a {
			.el-icon,
			.icon {
				margin-right: 5px;
				font-size: 15px;
			}
			width: 100%;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: grey;
		}
		height: 32px;
		line-height: 32px;
		text-align: center;
	}
}
.brief-introduction {
	li {
		display: flex;
		align-items: center;
		svg {
			margin-right: 5px;
		}
	}
}
.func_area_blogs {
	background-color: #fff;

	height: 40px;
}
</style>
